<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改用户</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="addform" label-width="80px" size="mini" :model="addform" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓 名:" prop="username">
              <el-input v-model="addform.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状 态:" prop="status">
              <el-select v-model="addform.status" placeholder="请选择">
                <el-option label="普通用户" value="普通用户"></el-option>
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="超级管理员" value="超级管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="登录名:" prop="loginname">
              <el-input v-model="addform.loginname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="电话:" prop="phone">
              <el-input v-model="addform.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="usereditbtn"
                >修改</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <!-- 返回原来的页面 -->
              <el-button type="warning" size="small" @click="goback"
                >返回</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.useredit();
  },
  data() {
    return {
      addform: {
        username: "",
        loginname: "",
        status: "",
        id: "",
        phone: "",
      },
      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "姓名长度应在 3 到 10 位之间",
            trigger: "blur",
          },
        ],
        loginname: [
          { required: true, message: "登录名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "登录名长度应在 3 到 10 位之间",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度应在 6 到 15 位之间",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "手机号码不符合",
            trigger: "blur",
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    useredit() {
      Object.assign(this.addform, this.$route.query);
      console.log(this.addform);
    },
    async usereditbtn() {
      // 提交前进行表单验证
      this.$refs.addform.validate(async (valid) => {
        if (valid) { // 如果表单验证通过
          // 将status转换为数字
          const statusMap = {
            "普通用户": 1,
            "管理员": 2,
            "超级管理员": 3
          };
          this.addform.status = statusMap[this.addform.status] || this.addform.status;
          console.log(this.addform);
          const { data: res } = await this.$http.put("/users/update", this.addform);
          if (res.code == 200) {
            this.$message.success(res.message);
            this.$router.push("/user");
          } else {
            this.$message.error(res.message);
          }
        } else { // 如果表单验证不通过
          this.$message.error("表单验证未通过，请检查输入");
        }
      });
    },
    goback() {
      window.history.back();
    },
  },
};
</script>

<style></style>
